define(function(require,exports,module){
   'use strict';

    var React = require('react');
    var Highcharts = require('highcharts');

    module.exports = React.createClass({
        getInitialState:function(){
            var category = [];
            var series = [];

            if(this.props.data){
                this.props.data.map(function(item){
                    var tmp = [];
                    item.data.map(function(i){
                        tmp.push(i.name);
                    });
                    category = tmp;
                });

                this.props.data.map(function(item){
                    var tmp = [];
                    item.data.map(function(i){
                        category.push(i.name);
                        tmp.push(i.value);
                    });
                    series.push({'name':item.name,data:tmp});
                });
            }

            return {
                category:category,
                series:series
            };
        },
        componentDidMount:function(){
            new Highcharts.Chart({
				colors: [
					'#058DC7',
					'#50B432',
					'#ED561B',
					'#DDDF00',
					'#24CBE5',
					'#64E572',
					'#FF9655',
					'#FFF263', 
					'#6AF9C4'
				], 
                chart: {
                    renderTo: this.props.id,
                    type: 'areaspline'
                },
                title: {
                    text: this.props.title
                },
                subtitle: {
                    text: this.props.description
                },
                xAxis: {
                    categories: this.state.category
                },
                yAxis: {
                    title: {
                        text: this.props.y
                    },
                    labels: {
                        formatter: function () {
                            return this.value / 1000 + 'k';
                        }
                    }
                },
                tooltip: {
					formatter: function () {
		                var s = '<b>' + this.x + '</b>';

		                $.each(this.points, function () {
		                    s += '<br/><span style="color:'+this.series.color+'">' + this.series.name + '</span>: ' +
		                        Highcharts.numberFormat(this.y,0,'.',',');
		                });

		                return s;
		            },
					crosshairs: true,
                    shared: true
                },
                plotOptions: {
                    areaspline: {
                        fillOpacity: 0.5
                    }
                },
                series: this.state.series
            });
        },
        render:function(){
            return (
                <div className={this.props.className} id={this.props.id}></div>
            );
        }
    });
});